<!DOCTYPE html>
<html>
<head>
    <title>Pendulum Diagram</title>
</head>
<body>
<canvas id="pendulumCanvas" width="400" height="450"></canvas>
<script>
    const canvas = document.getElementById('pendulumCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters based on the image
    const r = 30; // Pixel value for 'r'
    const rodLength = 6 * r;
    const centerX = canvas.width / 2;
    const pivotY = 50;
    const rodThickness = 4;

    // --- Styles ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    // --- Draw Rod ---
    const rodTopY = pivotY;
    const rodBottomY = pivotY + rodLength;
    ctx.beginPath();
    // Two vertical lines for the rod
    ctx.moveTo(centerX - rodThickness / 2, rodTopY);
    ctx.lineTo(centerX - rodThickness / 2, rodBottomY);
    ctx.moveTo(centerX + rodThickness / 2, rodTopY);
    ctx.lineTo(centerX + rodThickness / 2, rodBottomY);
    // Top cap of the rod
    ctx.moveTo(centerX - rodThickness / 2, rodTopY);
    ctx.lineTo(centerX + rodThickness / 2, rodTopY);
    ctx.stroke();

    // --- Draw Disk ---
    const diskCenterY = rodBottomY + r;
    ctx.beginPath();
    ctx.arc(centerX, diskCenterY, r, 0, 2 * Math.PI);
    ctx.stroke();

    // --- Labels and Dimensions ---

    // Set font for labels 'O', 'r', '6r'
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.textAlign = 'center';

    // Label 'O' for the pivot point
    ctx.fillText('O', centerX - 30, pivotY + 5);

    // Dimension for rod length '6r'
    const dimLineX = centerX + 40;
    const arrowHeadSize = 8;
    
    ctx.beginPath();
    // Vertical dimension line
    ctx.moveTo(dimLineX, rodTopY);
    ctx.lineTo(dimLineX, rodBottomY);
    
    // Top arrowhead (pointing up)
    ctx.moveTo(dimLineX, rodTopY);
    ctx.lineTo(dimLineX - arrowHeadSize / 2, rodTopY + arrowHeadSize);
    ctx.moveTo(dimLineX, rodTopY);
    ctx.lineTo(dimLineX + arrowHeadSize / 2, rodTopY + arrowHeadSize);
    
    // Bottom arrowhead (pointing down)
    ctx.moveTo(dimLineX, rodBottomY);
    ctx.lineTo(dimLineX - arrowHeadSize / 2, rodBottomY - arrowHeadSize);
    ctx.moveTo(dimLineX, rodBottomY);
    ctx.lineTo(dimLineX + arrowHeadSize / 2, rodBottomY - arrowHeadSize);
    ctx.stroke();
    
    // Label '6r'
    ctx.textAlign = 'left';
    ctx.fillText('6r', dimLineX + 12, pivotY + rodLength / 2 + 8);

    // Dimension for disk radius 'r'
    // Draw radius line
    const radiusAngle = -Math.PI / 4; // Approx. 4 o'clock position
    ctx.beginPath();
    ctx.moveTo(centerX, diskCenterY);
    ctx.lineTo(centerX + r * Math.cos(radiusAngle), diskCenterY + r * Math.sin(radiusAngle));
    ctx.stroke();
    
    // Label 'r'
    ctx.textAlign = 'center';
    ctx.fillText('r', centerX + r * 0.7, diskCenterY + 5);

    // --- Caption ---
    // Set font for Chinese caption
    ctx.font = '22px "SimSun"'; // A common Chinese font
    ctx.textAlign = 'center';
    ctx.fillText('习题 3-8 图', centerX, canvas.height - 20);

</script>
</body>
</html>